<template>
	<view class="login-container">
		<image class="logo" src="/static/downloaded-image.jpg" mode="aspectFit"></image>
		<view class="form-container">
			<uni-forms ref="form" :model="formData" :rules="rules">
				<uni-forms-item name="username">
					<uni-easyinput v-model="formData.username" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput type="password" v-model="formData.confirmPassword" placeholder="请输入确认密码" />
				</uni-forms-item>
			</uni-forms>
			<button class="button-primary" @click="handleRegisterClick">登录</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const form = ref(null);
const formData = ref({
	username: '',
	password: ''
});

const rules = {
	username: {
		rules: [{ required: true, errorMessage: '请输入用户名' }]
	},
	password: {
		rules: [{ required: true, errorMessage: '请输入密码' }]
	},
	confirmPassword:{
		rules: [{ required: true, errorMessage: '请输入确认密码' }]
	}
};

const handleRegisterClick = async () => {
	try {
		await form.value.validate();
		uni.showLoading({ title: '登录中...' });
		// 这里替换为你的登录API
		const res = await uni.request({
			url: '/api/login',
			method: 'POST',
			data: formData.value
		});
		uni.hideLoading();
		if (res.data.code === 200) {
			uni.showToast({ title: '登录成功' });
			uni.switchTab({ url: '/pages/index/index' });
		} else {
			uni.showToast({ title: res.data.message, icon: 'none' });
		}
	} catch (e) {
		console.error(e);
	}
};

onLoad(() => {
	// 页面加载时检查token
	const token = uni.getStorageSync('token');
	if (token) {
		uni.switchTab({ url: '/pages/index/index' });
	}
});
</script>

<style scoped>
.login-container {
	padding: 60rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.logo {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 60rpx;
	border-radius: 50%;
}

.form-container {
	width: 100%;
}

.login-btn {
	margin-top: 40rpx;
}

.title {
	font-size: 35px;
	text-align: center;
	font-weight: 700;
	margin-top: 150px;
	margin-bottom: 60px;
}

.container {
	padding: 30px;
}

.img {
	width: 40px;
	height: 40px;
}
</style>